<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <style>
        .nav {
            overflow: hidden;
        }
        
        .nav span {
            float: left;
            width: 160px;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            background: #ccc;
            color: #333;
            margin: 5px;
        }
        
        .nav .active {
            background: #0075bd;
            color: #fff;
        }
        
        #pinglun {
            height: 150px;
            width: 80%;
            padding-top: 10px;
            background-color: #eeeeee;
        }
        
        #pinglun input {
            margin-top: 10px;
            width: 500px;
        }
        
        #btn {
            margin-top: 10px;
            border: none;
            background-color: #dddddd;
            height: 30px;
        }
        
        .yangshi {
            width: 80%;
            font-size: 20px;
            margin-bottom: 10px;
            background-color: #eeeeee;
            padding: 10px 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="nav">
            <span :class="n2===1?'active':''" @click="n2=1">评论管理</span>
            <span :class="n2===2?'active':''" @click="n2=2">发布评论</span>

        </div>


        <div v-show="n2==1" v-for="(item,index) in arr" class="yangshi">

            <h4>评论人：{{item.name}}</h4>
            <h4>评论时间：{{item.time}}</h4>
            <h4>评论内容：{{item.username}}</h4>
        </div>


        <div v-show="n2==2" id="pinglun">
            <input type="text" class="form-control" id="inputEmail3" placeholder="昵称" v-model="name">
            <input type="text" class="form-control" id="inputEmail3" placeholder="评论内容" v-model="username">
            <button class="button " id="btn" @click="add">立即提交</button>
        </div>

    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            arr: [],
            name: "",
            username: "",
            n2: 2,

        },

        methods: {

            reset() {
                this.name = ""
                this.username = ""

            },
            add() {
                if (inputEmail3.value == "") {
                    alert("不能为空");
                    return;
                }
                this.arr.push({

                        name: this.name,
                        username: this.username,
                        time: new Date().toLocaleDateString() + " "
                    })
                    //表单数据清空
                this.reset()
            },



        }
    })
</script>

</html>